<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>KFC</title>
</head>

<body>
    <div class="main">
        <div class="title"><div style= "width: 100px;height: 50px; margin: auto; font-weight: 800;font-size:40px">KFC</div></div>
        <div class="shangping">
              <div class="c1">
                    <ul>
                            <li v-for="(item,index) in goodsList">
                                <div class="a1">
                                    <img width="200" height="200" v-bind:src="item.image" alt="">
                                </div>
                                <div class="a1"><span>{{item.name}}{{index+1}}</span><br>
                                      <span  style="font-size: 30px;   font-weight: 800;color :red">   {{item.price}}￥</span><br>
                                      <input type="number" placeholder="购买数量" v-model="item.buyNum" style="width: 40px;"><br>
                                      <span  style="font-size: 8px;  color :rgba(173, 158, 158, 0.692)">库存{{item.kucun-item.buyNum}}</span>
                                      
                                    </div>
                                
                            </li>
                        </ul>
    </div>
   
        </div>
    </div>
  
    
</body>

<style>
    body{
        margin: 0;
        padding: 0;
        background: #000;
    }
        .main{
            margin: auto;
            background: #fff;
            width: 500px;
            height: 1090px;
        }
    .title{
        height: 50px;
        background: rgb(194, 57, 57);;
        
    }
    .shangping{
        height: 750px;
    }
    li{
        list-style: none;
    }
    ul{
        padding: 0;
    }
    .a1{
        width: 250px;
        height: 200px;
        float: left;
        margin-top: 5px;
        
       
    }
</style>
<script src="https://unpkg.com/vue@3.2.47/dist/vue.global.js"></script>
<script>
    Vue.createApp({
        data: function () {
            return {
                goodsList: [
                    { name: '套餐', status: 1, price: 55,kucun:100,buyNum: 0, image: 'https://img0.baidu.com/it/u=3671228918,1354745130&fm=253&fmt=auto&app=138&f=PNG?w=650&h=444' },
                    { name: '套餐', status: 1, price: 78,kucun:100,buyNum: 0, image: 'https://img0.baidu.com/it/u=1595697255,221676844&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=304' },
                    { name: '套餐', status: 1, price: 28.8,kucun:100,buyNum: 0, image: 'https://img0.baidu.com/it/u=38130658,3363176878&fm=253&fmt=auto&app=138&f=JPEG?w=444&h=420' },
                    { name: '套餐', status: 1, price: 129,kucun:100,buyNum: 0, image: 'https://img1.baidu.com/it/u=196403913,1194107726&fm=253&fmt=auto&app=138&f=JPEG?w=499&h=312' },
                    { name: '套餐', status: 1, price: 231,kucun:100,buyNum: 0, image: 'https://img0.baidu.com/it/u=3966729859,23643840&fm=253&fmt=auto&app=138&f=JPEG?w=302&h=500' }
                ],
                isshow:0,

            }
        }
    }).mount(".c1")
 
</script>


</html>